@mixin extjs-form-field {
    .#{$prefix}form-field,
    .#{$prefix}form-display-field {
        float: left;
        
        margin: 0 0 0 0;
        
        font: $form-field-font;
    }
    
    .#{$prefix}form-text,
    textarea.#{$prefix}form-field {
        padding: $form-field-padding;
        
        background: repeat-x 0 0;
        border: $form-field-border-width solid;
        
        background-color: $form-field-background-color;
        @if $form-field-background-image {
            background-image: theme-image($theme-name, $form-field-background-image);
        }
        
        border-color: $form-field-border-color;
    }
    
    textarea {
        color: $form-field-color;
        
        background: repeat-x 0 0;
        background-color: $form-field-background-color;
        @if $form-field-background-image {
            background-image: theme-image($theme-name, $form-field-background-image);
        }
    }
    
    .#{$prefix}form-text {
        height: $form-field-height;
        
        line-height: 18px;
        
        vertical-align: middle;
    }
    
    @if $include-safari {
        .#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field {
            margin-bottom: -2px; // another bogus margin bug, safari/mac only
        }
    }
    
    textarea {
        resize: none; //Disable browser resizable textarea
    }
    
    .#{$prefix}form-focus,
    textarea.#{$prefix}form-focus {
  	  	border-color: $form-field-focus-border-color;
    }
    
    .#{$prefix}form-invalid-field,
    textarea.#{$prefix}form-invalid-field {
        background-color: $form-field-invalid-background-color;
        @if $form-field-invalid-background-image {
            background-image: theme-image($theme-name, $form-field-invalid-background-image);
            background-repeat: $form-field-invalid-background-repeat;
            background-position: $form-field-invalid-background-position;
        }
        border-color: $form-field-invalid-border-color;
    }
    
    .#{$prefix}form-item {
        font: $form-label-font;
    }

    .#{$prefix}form-error-msg {
		margin-left: 2px;
		
		background: transparent no-repeat 0 2px;
    }

    .#{$prefix}form-invalid-under {
		margin-top: 2px;
		padding: 2px;
        padding-left: 18px;

		color: $form-error-msg-color;
        font: $form-error-msg-font;
        line-height: $form-error-msg-line-height;
        
        background-image: theme-image($theme-name, $form-exclamation-icon);
	}

	.#{$prefix}form-invalid-icon {
        background-image: theme-image($theme-name, $form-exclamation-icon);
	}

    .#{$prefix}form-empty-field {
        color: $form-field-empty-color;
    }
    
    .#{$prefix}form-display-field {
        padding-top: 2px;
    }

    @if $include-ff {
        .#{$prefix}gecko .#{$prefix}form-display-field {
            padding-top: 1px;
        }
    }
    
    @if $include-ie {
        .#{$prefix}ie .#{$prefix}form-file {
            height: 22px;
            
            line-height: 18px;
            
            vertical-align: middle;
        }

        .#{$prefix}strict .#{$prefix}ie6 .#{$prefix}form-text,
        .#{$prefix}strict .#{$prefix}ie7 .#{$prefix}form-text {
            height: 18px;
            line-height: 16px !important;
        }


        .#{$prefix}ie6 .#{$prefix}form-composite .#{$prefix}form-text.#{$prefix}box-item,
        .#{$prefix}ie7 .#{$prefix}form-composite .#{$prefix}form-text.#{$prefix}box-item {
            margin: 0 !important; //clear ie bogus margin bug fix
        }
        
        .#{$prefix}strict .#{$prefix}ie7 .#{$prefix}form-display-field {
            padding-top: 1px;
        }

        .#{$prefix}ie .#{$prefix}form-display-field {
            padding-top: 3px;
        }

        .#{$prefix}strict .#{$prefix}ie8 .#{$prefix}form-display-field {
            padding-top: 0;
        }
    }
}

@mixin x-form-field($ui,
    $border: null,
    $border-width: 1px,
    $border-style: solid,
    $border-color: #000,
    $border-radius: null,
    
    $background-color: null,
    $background-gradient: null,
    
    $color: null,
    
    $padding: null
) {
    .#{$prefix}form-text,
    textarea.#{$prefix}form-field {
        @if $padding { padding: $padding; }
        
        @if $background-color {
            @include background-gradient($background-color, $background-gradient);
        }
        
        @if $border { border: $border-width $border-style $border-color; }
        @if $border-radius { @include border-radius($border-radius); }
    }
    
    .#{$prefix}form-text {
        height: $form-field-height;
        
        line-height: 18px;
        
        vertical-align: middle;
    }
};
